<template>
  <div>
    <div>
      <div class="nav">
        <van-nav-bar
          title="好友申请"
          @click-left="onClickLeft"
          left-text="返回"
          left-arrow
        />
      </div>
      <div class="fbox"></div>
      <div class="nulltip" v-if="requdata.length == 0 && requdata2.length == 0">
        <van-empty
          class="custom"
          image="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/meiyno.png"
          description="暂无好友申请"
        />
      </div>
      <div v-else class="main">
        <div class="item_list" v-for="item in requdata2" :key="item.rid">
          <div class="top_img">
            <img :src="iconUrl + item.userImage" alt="" />
          </div>
          <p class="title">{{ item.user }}</p>
          <p class="msg">{{ item.msg }}</p>
        </div>
        <div class="item_list" v-for="item in requdata" :key="item.rid">
          <div class="top_img">
            <img :src="iconUrl + item.userImage" alt="" />
          </div>
          <p class="title">{{ item.user }}</p>
          <p class="msg">{{ item.msg }}</p>
          <p class="time" v-if="item.msgType != 5">
            {{ changetime(item.dateTime) }}
          </p>
          <div class="bottom-btn" v-if="item.msgType != 5">
            <van-button
              class="Consent"
              @click="Consentmit(item.id, item.rid, item.user, item.userImage)"
              round
              type="info"
              >同意</van-button
            >
            <van-button
              class="Cancel"
              @click="Cancelmit(item.id, item.rid)"
              type="default"
              >拒绝</van-button
            >
          </div>
          <div class="bot_btn" v-else>
            <van-button
              class="Consent_t"
              @click="Denied(item.rid)"
              round
              type="info"
              >好吧！</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// const ws = new WebSocket("ws://localhost:8060");
const ws = new WebSocket("ws://106.55.48.147:8060");
import { mapState } from "vuex";
import myfun from "../../utils/timeDate.js";
let Base64 = require("js-base64").Base64;

export default {
  data() {
    return {
      requdata: [],
      requdata2: [],
    };
  },

  mounted() {
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
  },
  created() {
    this.getFriendsapply();
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
  methods: {
    changetime(t) {
      return myfun.dateTime1(t);
    },
    async getFriendsapply() {
      const { data: res } = await this.$http.get("Displaysfriend", {
        params: { id: this.emailLogin[0].userID },
      });
      this.requdata = res.data;
    },
    onClickLeft() {
      this.$router.push("/Message");
    },
    getUid() {
      ws.send(JSON.stringify({ uid: this.emailLogin[0].userID }));
    },
    handleWsOpen(e) {
      console.log("连接成功：", e);
      this.getUid();
    },
    handleWsClose(e) {
      console.log("连接关闭：", e);
    },
    handleWsError(e) {
      console.log("连接错误：", e);
    },
    handleWsMessage(e) {
      let data = JSON.parse(e.data);
      if (data.msgType === 4) {
        this.requdata.push(data);
      }
      if (data.msgType === 5) {
        this.requdata2.push(data);
      }
      if (data.msgType === 3) {
        this.requdata.push(data);
        this.getFriendsapply();
      }

      console.log(e);
    },
    async Consentmit(id, rid, uname, imgs) {
      ws.send(
        JSON.stringify({
          id: this.emailLogin[0].userID,
          receive_id: id,
          user: this.emailLogin[0].Nickname,
          dateTime: new Date(),
          userImage: this.emailLogin[0].userImg,
          msg: "对方同意了您的好友请求！",
          msgType: 4,
        })
      );
      let data = {
        id: this.emailLogin[0].userID,
        receive_id: id,
        user: this.emailLogin[0].Nickname,
        dateTime: new Date(),
        userImage: this.emailLogin[0].userImg,
        msg: Base64.encode("我们已经成为好友啦！"),
        msgType: 4,
      };
      let data2 = {
        id: id,
        receive_id: this.emailLogin[0].userID,
        user: uname,
        dateTime: new Date(),
        userImage: imgs,
        msg: Base64.encode("我们已经成为好友啦！"),
        msgType: 4,
      };
      const { data: res } = await this.$http.post("Consentfriendsapply", data);
      const { data: res1 } = await this.$http.post(
        "Consentfriendsapply2",
        data2
      );
      const { data: res2 } = await this.$http.get("Deletefriend", {
        params: { id: rid },
      });
      console.log(res2);
      this.getFriendsapply();
    },
    async Cancelmit(id, rid) {
      ws.send(
        JSON.stringify({
          id: this.emailLogin[0].userID,
          receive_id: id,
          user: this.emailLogin[0].Nickname,
          dateTime: new Date(),
          userImage: this.emailLogin[0].userImg,
          msg: "对方拒绝了您的好友申请！",
          msgType: 5,
        })
      );
      let data = {
        id: this.emailLogin[0].userID,
        receive_id: id,
        user: this.emailLogin[0].Nickname,
        dateTime: new Date(),
        userImage: this.emailLogin[0].userImg,
        msg: "对方拒绝了您的好友申请！",
        msgType: 5,
      };
      const { data: res } = await this.$http.post("addfriendsapply", data);
      const { data: res2 } = await this.$http.get("Deletefriend", {
        params: { id: rid },
      });
      this.getFriendsapply();
    },
    async Denied(rid) {
      const { data: res1 } = await this.$http.get("Deletefriend", {
        params: { id: rid },
      });

      this.getFriendsapply();
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
}
.main {
  padding: 0px 30px 15px;
  .item_list {
    margin-top: 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
    .top_img {
      width: 60px;
      height: 60px;
      margin: 0 auto;
      padding: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .title {
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
    }
    .msg {
      color: #7e7e7e;
      font-size: 0.8rem;
      text-align: center;
      margin: 15px 0;
    }
    .time {
      color: #7e7e7e;
      font-size: 0.8rem;
      text-align: center;
    }
    .bottom-btn {
      margin: 0 auto;
      width: 245px;
      button {
        border-radius: 15px;
        margin: 10px;
        width: 100px;
      }
      .Consent {
      }
      .Cancel {
      }
    }
    .bot_btn {
      margin: 0 auto;
      width: 120px;
    }
    .Consent_t {
      border-radius: 15px;
      margin: 10px;
      width: 100px;
    }
  }
}
.van-empty__image {
  width: 100px;
  height: 160px;
}
</style>